<ui:composition xmlns="http://www.w3.org/1999/xhtml"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                template="/masterLayout.xhtml"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:p="http://primefaces.prime.com.tr/ui"
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns:componentes="http://java.sun.com/jsf/composite/componentes">

    <ui:define name="titulo_ventana">Registrar Orden de Compra</ui:define>
    <ui:define name="titulo_pagina">Registrar Orden de Compra</ui:define>
    <ui:define name="pagina">
        <style type="text/css">
            .ui-notificationbar {
                color:#000 !important;
                height: auto !important;
            }
            .bottom {
                background-color: #ddd;
                padding:2em 0 2em 2em;
                margin-left: 0;
                margin-right: 0;
                left: 0;
                right: 0;
            }
        </style>
        <h:form prependId="false">
            <p:dialog width="480" widgetVar="listaArticulos" modal="true" closeOnEscape="true" visible="false" draggable="false" resizable="false" header="Lista de Artículos" >
                <p:dataTable
                    var="fila"
                    value="#{VistaRegistrarOrdenDeCompra.devolverArticulosProveedor()}"
                    paginator="true"
                    dynamic="true"
                    lazy="true"
                    rows="5"
                    nextPageLinkLabel="Siguiente >"
                    lastPageLinkLabel="Último >>"
                    previousPageLinkLabel="&lt; Anterior"
                    firstPageLinkLabel="&lt;&lt; Primero"
                    emptyMessage="No hay registros cargados"
                    errorMessage="Hubo un error cargando los datos"
                    loadingMessage="Cargando..."
                    >
                    <p:column filterBy="#{fila.articulo.tipo}" sortBy="#{fila.articulo.tipo}">
                        <f:facet name="header">
                            Tipo
                        </f:facet>
                        #{fila.articulo.tipo}
                    </p:column>
                    <p:column filterBy="#{fila.articulo.nombre}" filterMatchMode="contains" sortBy="#{fila.articulo.nombre}">
                        <f:facet name="header">
                            Nombre
                        </f:facet>
                        #{fila.articulo.nombre}
                    </p:column>
                    <p:column sortBy="#{fila.precio}">
                        <f:facet name="header">
                            Precio
                        </f:facet>
                        <h:outputText value="#{fila.precio}" >
                            <f:convertNumber currencySymbol="$" type="currency" />
                        </h:outputText>
                    </p:column>
                    <p:column>
                        <f:facet name="header">
                            Acción
                        </f:facet>
                        <p:commandButton value="Agregar" action="#{VistaRegistrarOrdenDeCompra.agregarArticulo(fila)}" onsuccess="listaArticulos.hide();document.formAgregar.cantidadAgregar.value='';dlg.show();document.formAgregar.cantidadAgregar.focus();" />
                    </p:column>
                </p:dataTable>
            </p:dialog>
            <p>Por favor, seleccione los artículos para agregar a la orden de compra:</p>
            <p:dataTable
                var="fila"
                value="#{VistaRegistrarOrdenDeCompra.detallesAgregados}"
                paginator="true"
                rows="5"
                dynamic="true"
                lazy="true"
                nextPageLinkLabel="Siguiente >"
                lastPageLinkLabel="Último >>"
                previousPageLinkLabel="&lt; Anterior"
                firstPageLinkLabel="&lt;&lt; Primero"
                emptyMessage="No hay registros cargados"
                errorMessage="Hubo un error cargando los datos"
                loadingMessage="Cargando..."
                id="tablaDestino"
                >
                <p:column filterBy="#{fila.articulo.tipo}" sortBy="#{fila.articulo.tipo}">
                    <f:facet name="header">
                        Tipo
                    </f:facet>
                    #{fila.articulo.tipo}
                </p:column>
                <p:column filterBy="#{fila.articulo.nombre}" filterMatchMode="contains" sortBy="#{fila.articulo.nombre}">
                    <f:facet name="header">
                        Nombre
                    </f:facet>
                    #{fila.articulo.nombre}
                </p:column>
                <p:column>
                    <f:facet name="header">
                        Precio
                    </f:facet>
                    <h:outputText value="#{fila.precio}">
                        <f:convertNumber type="currency" currencySymbol="$" />
                    </h:outputText>
                </p:column>
                <p:column>
                    <f:facet name="header">
                        Cantidad
                    </f:facet>
                    #{fila.cantidad}
                </p:column>
                <p:column>
                    <f:facet name="header">
                        Acción
                    </f:facet>
                    <p:commandButton value="Editar" action="#{VistaRegistrarOrdenDeCompra.cargarArticuloCantidad(fila)}" onsuccess="document.formEditar.cantidadEditar.value=#{fila.cantidad};dlg2.show();document.formEditar.cantidadEditar.focus();" />
                    <p:commandButton value="Quitar" action="#{VistaRegistrarOrdenDeCompra.quitarArticuloAgregado(fila)}" onsuccess="location.reload(true);"/>
                </p:column>
            </p:dataTable>
            <h:outputText styleClass="error" value="#{VistaRegistrarOrdenDeCompra.error}"/>
            <div class="botonesBottom">
                <p:commandButton ajax="false" value="Volver" action="mostrarDatosProveedor"/>
                <p:commandButton value="Agregar Artículos" onclick="listaArticulos.show();"/>
                <p:commandButton ajax="false" value="Siguiente" action="#{VistaRegistrarOrdenDeCompra.seleccionarArticulosSiguiente}"/>
            </div>
            <p:commandButton value="Mostrar Requerimientos de Material" onclick="bottomBar.show(); return false;" style="position: absolute; bottom: 2em; right: 2em;"/>
        </h:form>
        <h:outputScript library="javascript" name="validacion.js" />
        <p:dialog modal="true" header="Ingrese la cantidad" width="300" widgetVar="dlg" visible="false" draggable="false" resizable="false" closeOnEscape="true">
            <h:form prependId="false" id="formAgregar">
                <h:panelGrid columns="2" style="margin-bottom:10px">
                    <h:outputLabel for="cantidadAgregar" value="Ingrese la cantidad asociada:" />
                    <h:inputText style="width:100px" id="cantidadAgregar" value="#{VistaRegistrarOrdenDeCompra.setearCantidadYAgregar}"/>
                </h:panelGrid>
                <p:commandButton styleClass="botonesBottom" value="Aceptar" oncomplete="dlg.hide();" update="tablaDestino" onclick="return validarCantidadAgregar()"/>
            </h:form>
        </p:dialog>
        <p:dialog modal="true" header="Cambiar la cantidad" width="300" widgetVar="dlg2" visible="false" draggable="false" resizable="false" closeOnEscape="true">
            <h:form prependId="false" id="formEditar">
                <h:panelGrid columns="2" style="margin-bottom:10px">
                    <h:outputLabel for="cantidadEditar" value="Ingrese la cantidad asociada:" />
                    <h:inputText style="width:100px" id="cantidadEditar" value="#{VistaRegistrarOrdenDeCompra.setearCantidadYGuardar}"/>
                </h:panelGrid>
                <p:commandButton styleClass="botonesBottom" value="Aceptar" oncomplete="dlg2.hide();" update="tablaDestino" onclick="return validarEditarDetalle()"/>
            </h:form>
        </p:dialog>
        <p:notificationBar position="bottom" effect="fade" widgetVar="bottomBar" styleClass="bottom" autoDisplay="true">
            <f:facet name="close">
                <h:graphicImage library="images" name="closebar.png"/>
            </f:facet>
            <componentes:datosOrdenDeProduccion ordenDeProduccion="#{vistaOrdenDeProduccion.ordenDeProduccionSeleccionada}" mostrarDetalles="false" />
        </p:notificationBar>
    </ui:define>
</ui:composition>


